<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var Geometry1 = new Object();
	Geometry1.vertices = new Float32Array([
   // Vertex coordinates and color(RGBA)
    -5.0,0.0,-5.0,  1.0,1.0,1.0,   -1,-1,-1,//0
    -5.0,0.0,5.0,  1.0,1.0,1.0,   -1,-1,1, //1
    5.0,0.0,-5.0,  0.0,1.0,1.0,   1,-1,-1,//2
    5.0,0.0,5.0,  1.0,1.0,1.0,	  1,-1,1, //3
    -5.0,5,-5.0,  1.0,1.0,1.0,   -1,1,-1,//4
    -5.0,5.0,5.0,  1.0,1.0,1.0,  -1,1,1, //5
    5.0,5.0,-5.0,  1.0,1.0,1.0,  1,1,-1, //6
    5.0,5.0,5.0,  1.0,1.0,1.0,    1,1,1, //7
      ]);

	Geometry1.indexs = new Uint8Array([
    0,1,2,
    2,1,3,//下

    4,5,6,//上
    6,5,7,

    4,0,6,//后
    6,0,2,
    
    5,1,7,//前
    7,1,3,

    0,1,5,//坐
    5,0,4,

    2,6,7,//右
    7,2,3
      ]);


	Geometry1.VSHADER_SOURCE =
	"attribute vec4 a_Position;"+
	"attribute vec4 a_Color;"+
	"attribute vec4 a_Normal;"+
	"uniform vec3 u_LightColor;"+
	"uniform vec3 u_LightDirection;"+
	"uniform mat4 u_mat4;"+
	"uniform mat4 u_mat4l;"+
	"varying vec4 v_Color;"+
	"void main(){"+
	"gl_Position = u_mat4 * a_Position;"+
	"vec4 normal = u_mat4l* a_Normal;"+
	"float dotf = max(dot(u_LightDirection,normal.xyz),0.0);"+
	"vec3 diffuse = u_LightColor*a_Color.rgb * dotf;"+
	"v_Color = vec4(diffuse,a_Color.a);"+
	"}";

	Geometry1.FSHADER_SOURCE =
	"precision mediump float;"+
	"varying vec4 v_Color;"+
	"void main(){"+
	"gl_FragColor = v_Color;"+
	"}";
	 Geometry1.initVertexBuffers = function(gl){
		this.vertexBuffer = gl.createBuffer();
		if(!this.vertexBuffer){
			alert('createBuffer gvertexBuffer fail');
			return false;
		}
		this.indexBuffer = gl.createBuffer();
		if(!this.indexBuffer){
			alert('createBuffer indexBuffer fail');
			return false;
		}
		return true
	}

	Geometry1.initTexture =function(gl){
		this.texture = gl.createTexture();
		if(!this.texture){
			alert('create texture fail');
			return false;
		}

		var image = new Image();
		image.geometry = this;
		image.onload = function(){
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D,this.geometry.texture);

			gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
			gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
        	gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);

			gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);

			this.geometry.texReady = true;

		}
		image.src  = './textures/2.jpg';
		return true

	}

    Geometry1.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}
		gl.useProgram(this.program);
    	this.a_mat = gl.getUniformLocation(this.program,'u_mat4');	
		if (!this.a_mat) {
			alert('uniform u_mat4 fail');
			return false;
		}

		this.u_mat4l = gl.getUniformLocation(this.program,'u_mat4l');
		if(!this.u_mat4l){
			alert("u_mat4l fail");
			return false;
		}

		this.u_LightColor = gl.getUniformLocation(this.program,'u_LightColor');
		if(!this.u_LightColor){
			alert('u_LightColor fail');
			return false;
		}

		this.u_LightDirection = gl.getUniformLocation(this.program,'u_LightDirection');
		if(!this.u_LightDirection){
			alert('u_LightDirection fail');
			return;
		}

    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('a_PointSize fail')
			return false;
		}
		
		this.a_Color = gl.getAttribLocation(this.program,'a_Color');
		if(this.a_Color <0){
			alert('a_Color fail');
			return false;
		}

		this.a_Normal = gl.getAttribLocation(this.program,'a_Normal');
		if(this.a_Normal <0){
			alert('a_Normal fail');
			return false;
		}

		gl.enableVertexAttribArray(this.a_Position);
		gl.enableVertexAttribArray(this.a_Color);
		gl.enableVertexAttribArray(this.a_Normal);

		return true;
    }

  

	Geometry1.mat = new Matrix4();


	Geometry1.draw = function(gl,frames){
		if(!this.texReady){
			return;
		}
		gl.bindBuffer(gl.ARRAY_BUFFER,this.vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);

	
		
		var Fsize = this.vertices.BYTES_PER_ELEMENT;
		gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,Fsize*9,0);
		gl.vertexAttribPointer(this.a_Color,3,gl.FLOAT,false,Fsize*9,Fsize*3);
		gl.vertexAttribPointer(this.a_Normal,3,gl.FLOAT,false,Fsize*9,Fsize*6);
			
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.indexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,this.indexs,gl.STATIC_DRAW);

		this.mat.setPerspective(45,1,1,100);
		this.mat.lookAt(20,20,20,0,0,0,0,1,0);
		this.mat.rotate(frames%360,0,1,0)

		var mat4l = new Matrix4();
		mat4l.setRotate(frames%360,0,1,0);

		gl.uniformMatrix4fv(this.u_mat4l,false,mat4l.elements);
		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);

		gl.uniform3f(this.u_LightColor,0.8,0.8,0.8);

		var lightDirection = new Vector3([1, 1,1]);
  		lightDirection.normalize();     // Normalize
		gl.uniform3fv(this.u_LightDirection,lightDirection.elements);

		gl.drawElements(gl.TRIANGLES,Geometry1.indexs.length,gl.UNSIGNED_BYTE,0);

		this.mat.translate(3,5,0);
		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);

		gl.drawElements(gl.TRIANGLES,Geometry1.indexs.length,gl.UNSIGNED_BYTE,0);

		gl.bindBuffer(gl.ARRAY_BUFFER,null);
	}

    var canvas = null;
	function start () {
		canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}

		if(!Geometry1.initShader(gl)){
			alert('Geometry1 initShaderParm fail')
			return;
		}

		if (!Geometry1.initVertexBuffers(gl)){
			alert('Geometry1 initVertexBuffers fail');
			return;
		}
		if(!Geometry1.initTexture(gl)){
			alert('initTexture fail');
			return;
		}

		var frames = 0
		function renderer(){
			frames++;
			render(gl,frames);
			requestAnimationFrame(renderer)
		}
		renderer();
	}

	function render(gl,frames){
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
		gl.enable(gl.DEPTH_TEST);
		Geometry1.draw(gl,frames);		
	}



</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>